<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Task43 多功能相册之拼图布局</title>
    <link rel="stylesheet" type="text/css" href="css/puzzle-style.css">
</head>

<body>
    <div class='album album1'>
        <img src="imgs/01.jpg">
    </div>
    <div class='album album2'>
        <img src="imgs/01.jpg">
        <img src="imgs/02.jpg">
    </div>
    <div class='album'>
        <div class="album3-left">
            <img src="imgs/01.jpg">
        </div>
        <div class="album3-right">
            <img src="imgs/02.jpg">
            <img src="imgs/05.jpg">
        </div>
    </div>
    <div class='album'>
        <div class="album4-left">
            <img src="imgs/01.jpg">
            <img src="imgs/05.jpg">
        </div>
        <div class="album4-right">
            <img src="imgs/03.jpg">
            <img src="imgs/04.jpg">
        </div>
    </div>
    <div class='album'>
        <div class="album5-left">
            <div class="album5-left-top">
                <img src="imgs/01.jpg">
            </div>
            <div class="album5-left-bottom">
                <img src="imgs/05.jpg">
                <img src="imgs/03.jpg">
            </div>
        </div>
        <div class="album5-right">
            <img src="imgs/02.jpg">
            <img src="imgs/04.jpg">
        </div>
    </div>
    <div class='album'>
        <div class="album6-left">
            <div class="album6-left-top">
                <img src="imgs/01.jpg">
            </div>
            <div class="album6-left-bottom">
                <img src="imgs/05.jpg">
                <img src="imgs/03.jpg">
            </div>
        </div>
        <div class="album6-right">
            <img src="imgs/02.jpg">
            <img src="imgs/04.jpg">
            <img src="imgs/06.jpg">
        </div>
    </div>

</body>

</html>
